<template>
  <PageWrapper contentBackground>
    <template #title>
      <span>日志列表</span>
    </template>
    <template #footer>
      <div>
        <Form name="custom-validation" ref="formRef" :model="formSearch" v-bind="layout">
          <FormItem has-feedback label="部门" name="deptId">
            <TreeSelect
              v-model:value="formSearch.deptId"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="deptList"
              placeholder="请选择部门"
              tree-default-expand-all
              :replaceFields="replaceFields"
            >
              <template #title="{ key, value }">
                <span style="color: #08c" v-if="key === formSearch.deptId">{{ value }}</span>
              </template>
            </TreeSelect>
          </FormItem>
          <FormItem has-feedback label="用户" name="userId">
            <Select
              v-model:value="formSearch.userId"
              placeholder="请选择用户"
              show-search
              optionFilterProp="label"
            >
              <SelectOption
                :value="item.id"
                v-for="(item, index) in userList"
                :label="item.nickname"
                :key="index"
                >{{ item.nickname }}</SelectOption
              >
            </Select>
          </FormItem>
          <FormItem has-feedback label="日期" name="logDate">
            <RangePicker v-model:value="formSearch.logDate" @change="onChange" valueFormat="x" />
          </FormItem>
          <FormItem>
            <a-button type="primary" html-type="submit" @click="searchForm"  v-if="hasPermission(['system:record:query'])">搜索</a-button>
            <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
          </FormItem>
        </Form>
      </div>
    </template>
    <List item-layout="vertical" :data-source="listData">
      <template #loadMore>
        <div
          :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
        >
          <Button v-if="loadingMore" @click="getWorkLogMore">加载更多</Button>
        </div>
      </template>
      <template #renderItem="{ item, index }">
        <ListItem key="item.title">
          <ListItemMeta />
          <Card class="card_All">
            <template #title>
              <!-- {{ user.nickname }} -->
              {{ item.userName ? item.userName : '--' }}
              {{ item.createdAt ? moment(item.createdAt).format('YYYY-MM-DD') : '-' }}
              {{ item.createdAt ? getDayString(moment(item.createdAt).day()) : '-' }}
            </template>
            <div>
              <div v-html="item.logContent" class="content"></div>
            </div>
          </Card>
        </ListItem>
      </template>
      <!-- <template #footer></template> -->
    </List>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { workLogList, deptSimple, userSimple } from '/@/api/backs/workLog/diary';
  import { usePermission } from '/@/hooks/web/usePermission';
  import {
    Card,
    List,
    ListItem,
    ListItemMeta,
    Button,
    Form,
    FormItem,
    Select,
    SelectOption,
    DatePicker,
    TreeSelect,
  } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import moment from 'moment';
  export default defineComponent({
    components: {
      PageWrapper,
      Card,
      List,
      ListItem,
      ListItemMeta,
      Button,
      Form,
      FormItem,
      Select,
      SelectOption,
      TreeSelect,
      RangePicker: DatePicker.RangePicker,
    },
    setup() {
      const { hasPermission } = usePermission();
      const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      };
      const userStore = useUserStore();
      const formRef = ref();
      const data: any = reactive({
        options: {},
        toolbar: true,
        showImageUpload: false,
        content: '',
        menubar: false,
        title: '张三  2021年7月1日',
        pageNo: 1,
        pageSize: 10,
        listData: [],
        loadingMore: false,
        total: 0,
        user: userStore.getUserInfo.user,
        logDate: (moment().format('x') / 1000).toFixed(0),
        formSearch: {
          userId: null,
          logDate: [],
          deptId: null,
        },
        userList: [],
        deptList: [],
        replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
      });
      const onChange = (value: Moment[], dateString: string[]) => {
        console.log('Formatted Selected Time: ', value, dateString);
      };
      const getDayString = (day) => {
        switch (day) {
          case 0:
            return '星期天';
          case 1:
            return '星期一';
          case 2:
            return '星期二';
          case 3:
            return '星期三';
          case 4:
            return '星期四';
          case 5:
            return '星期五';
          case 6:
            return '星期六';
        }
      };
      //加载更多
      function getWorkLogMore() {
        if (data.loadingMore) {
          data.pageNo += 1;
          getWorkLogList();
        }
      }
      const resetForm = () => {
        formRef.value.resetFields();
        getWorkLogList();
      };
      const searchForm = () => {
        getWorkLogList();
      };
      //获取额外参数
      const getOptions = async () => {
        data.userList = await userSimple();
        // data.userList = user;
        data.deptList = await deptSimple();
        // data.deptList = dept;
      };
      getOptions();
      //获取列表
      const getWorkLogList = async () => {
        let paramas = {
          pageNo: data.pageNo,
          pageSize: data.pageSize,
        };
        if (data.formSearch.deptId) {
          paramas.deptId = data.formSearch.deptId;
        }
        if (data.formSearch.userId) {
          paramas.userId = data.formSearch.userId;
        }
        if (data.formSearch.logDate && data.formSearch.logDate.length) {
          let time = data.formSearch.logDate;
          // paramas.startTime = (moment(time[0] * 1).format('x') / 1000).toFixed(0);
          // paramas.endTime = (moment(time[1] * 1).format('x') / 1000).toFixed(0);
          paramas.startTime = time[0];
          paramas.endTime = time[1];
        }
        console.log('我是搜索条件', paramas);

        // return;
        try {
          let res = await workLogList(paramas);
          data.total = res.total;

          if (data.loadingMore && data.pageNo != 1) {
            data.listData = data.listData.concat(res.list);
          } else {
            data.listData = res.list;
          }
          data.loadingMore = data.total > data.listData.length;
        } catch (error) {}
      };

      getWorkLogList();
      return {
        ...toRefs(data),
        formRef,
        getWorkLogList,
        moment,
        layout,
        getDayString,
        getWorkLogMore,
        resetForm,
        onChange,
        getOptions,
        searchForm,
        hasPermission,
      };
    },
  });
</script>
<style lang="less" scoped>
  ::v-deep(.vben-page-wrapper-content-bg) {
    background: transparent;
  }
  ::v-deep(.ant-form) {
    display: flex;
    justify-content: space-between;
  }
  ::v-deep(.ant-row) {
    width: 100%;
  }
</style>
